<template>
	<view class="warp">
		<uni-nav-bar background-color="rgba(0,0,0,0)"
		 color="#0b2659" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					签到记录
				</view>
			</view>
		 	<view class="right">
				<!-- <uni-icons fontFamily="CustomFont" :size="26">{{'\ue62b'}}</uni-icons> -->
		 	</view>
		   </view>
		   </uni-nav-bar>
		   <view class="signlist">
		   	<view class="item" v-for="(item,index) in signList" :key="index">
		   		<view class="left">
		   			<view class="icon">
		   				<uni-icons color="#fccf3e" type="star-filled" size="32"></uni-icons>
		   			</view>
					<view class="cont_text">
						<view class="top">
							捕获一颗小星星
						</view>
						<view class="bottom">
							{{item.signInDate}}
						</view>
					</view>
		   		</view>
				<view class="right">
					<uni-icons color="#a3a3a3" type="right" size="24"></uni-icons>
				</view>
		   	</view>
			<view style="text-align: center;" class="" v-if="signList.length==0">
				暂无签到记录
			</view>
		   </view>
		   <!-- 登录提示 -->
		   <loginPop ref="loginPop"  ></loginPop>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				signList:[],//签到记录
				queryform:{
					pageSize:10,
					current:1
				},
				total:0
			};
		},
		onLoad() {
			this.getsignRecord()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		// 下拉刷新
		onPullDownRefresh(){
			 this.getsignRecord()
			setTimeout(()=>{
				  uni.stopPullDownRefresh()
			},2000)
		},
		onReachBottom(){
		 
			if(this.queryform.pageSize*this.queryform.current>this.total){
				 
				uni.showToast({
					title:"数据加载完毕",
					icon:'none'
				})
			}else{
				this.queryform.current++
				this.$request({
					url:'v3/sign/front/list',
					method:'GET',
					data:this.queryform
				}).then(res=>{
					this.signList.push(...res.data.list)
					
				})
			}
		},
		methods:{
			
			// 获取签到记录
			getsignRecord(){
				if(!this.hasLogin){
					this.$refs.loginPop.openLogin()
				}else{
					// 获取签到记录
					this.$request({
						url:'v3/sign/front/list',
						method:'GET',
						data:this.queryform
					}).then(res=>{
					if(res.state==200){
						this.signList=res.data.list
						this.total=res.data.pagination.total
					}
					})
				}
			},
			
			
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>
<style>
	page{
		background-color: #edf2fa;
	}
</style>
<style lang="scss" scoped>
	
.warp{
	
	padding: 20rpx;
	.title_box{
		padding: 0 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	.signlist{
		.item{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 10rpx;
			align-items: center;
			border-bottom: 2rpx solid #cecece;
		    .left{
				display: flex;
				align-items: center;
				.cont_text{
					margin-left: 16rpx;
					.top{
						font-size: 28rpx;
						color: #323333;
					}
					.bottom{
						font-size: 24rpx;
						color: #bababa;
						padding-top: 10rpx;
					}
				}
			}
		}
	}
	
	
}
</style>
